<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta charset='utf-8'>
        <meta name="author" content="order by dede58.com"/>
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<title>登录</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta http-equiv="Cache-Control" content="no-siteapp">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<link rel="stylesheet" type="text/css" href="css/page.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		
		<!-- 引入 layui.css -->
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
		 
		
		
		
		<!--  引入jQuery.js -->
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		
		
		
		<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/jquery.SuperSlide.2.1.js"></script>
		
		<!--  引入jQuery.cookie.js -->
    	<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    	
    	
    	
    	<!-- 引入 layui.js -->
		<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
	</head>
	<script>
	
	</script>
	<body class="sign-bg">
		<video loop="loop" autoplay="autoplay" preload="" muted="muted" src="img/background/元气桌面官网——动态壁纸桌面—高清壁纸下载(1).mp4" poster="" class="LoginTopNav_video_1W33g" 
		style="position: fixed;
		          right:0;
		          bottom: 0;
		          min-width: 100%;
		          min-height: 100%;
		          width: auto;
		          height: auto;
		          z-index: -9999;"> 抱歉，您的浏览器不支持内嵌视频 </video>
	
		<div class="sign clearfix">
			<div class="top clearfix">
				<a href="index.jsp" class="fl fanhui">返回首页</a>
				<p class="fr">
					还没有游戏账号？
					<a href="register.jsp" class="zhuce ra3">
						注册
					</a>
				</p>
			</div>
			<div class="bottom clearfix box-s ra10" style="background-color: rgba(255,255,255,0.5);">
				<div class="sign-logo clearfix">
					<img src="img/yuanlogo.png"/>
				</div>
				<div class="content clearfix">
				<form method="post" class="layui-form" action="../LoginServlet" onsubmit="return check()">
				<!-- 隐藏域 -->
        		<input type="hidden" name="role" value="3">
					<ul>
						<li>
							<span class="fl"></span>
							<input type="text" name="mobile" id="" value="" placeholder="手机号码" class="fl shuru" />
						</li>
						<li>
							<span class="fl mima"></span>
							<input type="password" name="password" id="" value="" placeholder="密码" class="fl shuru" />
						</li>
						<li>
							<div>
							<span class="fl hudun"></span>
								<!-- <label 
								style=" font-weight: bold;
									    width: 45px;
									    height: 52px;
									    line-height: 52px;
									    padding-left: 4px;
									    color: black;">
									验证码
								</label> -->
								<div>
									<input type="text" name="code" placeholder="请输入验证码" 
									style=" position: absolute;
										    top: 270px;
										    left: 107px;
										    padding: 10px;
										    border-bottom: none;
										    border-top: none;
										    border-right: none;
										    padding-left: 16px;
										    BORDER-LEFT: #dddddd 1px solid;
										">
										<div id="yzm">
										<img src="/gamestore/CodeServlet" 
											style=" position: absolute;
										    left: 350px;
										    top: 267px;
										">
										</div>
									
									<i id="ref" class="layui-icon layui-icon-refresh-3" 
									style=" position: absolute;
										    left: 456px;
										    top: 274px;
										    font-size: x-large;
										    cursor: pointer;"></i>
								</div>
							</div>
						</li>
						<li class="jizhu" style="background-color: rgba(255,255,255,0);">
							<div class="fl"> 
							    <label>
							        <input id="rememberme" type="checkbox" name="remember" value="" style="display: inline-block; opacity: 1; position: absolute; top: 4px;">
							        <!-- <div class="option"></div> -->
							        <p class="opt-text fl ml20">记住密码</p>
							    </label>
							</div>
							<a href="#" class="wjmima fr">
								忘记密码？
							</a>
						</li>
					</ul>
					<a href="#" class="sign-btn ra5">立即登录</a>
					<input  type="submit" value="登录" lay-submit lay-filter="login" style="width: 100%; position: relative; top: -52px; height: 50px; opacity: 0;">
				</form>
				</div>				
			</div>
	<script>
	/* 登录之前对输入框是否为空进行校验 */
	function check(){
		if($("input[name='mobile']").val() != ""){
			if($("input[name='password']").val() != ""){
				if($("input[name='code']").val() != ""){
					return true;
				}
				layer.msg('验证码不能为空'); 
				return false;
			}
			layer.msg('密码不能为空'); 
			return false;
		}
		layer.msg('手机号不能为空'); 
		return false;
	}
	
	
	$(function(){
		
		$("#rememberme").next().remove();
		
		// 点击图标刷新	或	点击验证码刷新
		$("#ref,#yzm").click(function(){
			$("#yzm").html("<img src=\"/gamestore/CodeServlet?"+Math.random()+"\" style=\"position: absolute; left: 350px; top: 267px;\">");
		});
		// 设置自动刷新
		setInterval(function(){$("#yzm").html("<img src=\"/gamestore/CodeServlet?"+Math.random()+"\" style=\"position: absolute; left: 350px; top: 267px;\">");}, 15000);
		
		
	})
	
	
      // 通过el表达式获取请求参数
      
      let code = "${param.code}";
      if(code != "") {
    	  layer.msg('验证码错误'); 
      }else{
    	  let message = "${param.message}";
    	  if(message != ""){
        	  layer.msg('用户名或密码错误'); 
          }else{
        	  let status = "${param.status}";
        	  if(status != ""){
            	  layer.msg('账号已被冻结'); 
              }
          }
      }
      
      // 通过js或jQuery读取cookie做填充
      $(document).ready(function(){
    	  // 当用户访问登录页面的时候，页面中需要通过javascrip或jQuery获取cookie信息,如果有对应的cookie信息自动填充，并设置复选框为选中状态
    	  // 当前案例中使用jQuery.cookie插件实现cookie的操作
    	  // 1.获取指定的cookie
    	  let rememberMe = $.cookie('rememberMe');  
    	  // 2.判断是否存在记住密码信息
    	  if(rememberMe != null){
    		  // 值"手机号=密码" 填充指定表单域上
    		  // 对值根据=进行切割,
    		  let vs = rememberMe.split("="); // ["手机号","密码"]
    		  // 填充
    		  $("input[name='mobile']").val(vs[0]);
    		  $("input[name='password']").val(vs[1]);
    		  // 复选框选中
    		  $("input[name='remember']").prop("checked",true);
    	  }
    	  
    	  
    	  // 当用户访问登录页面的时候，输入用户名失去焦点如果有对应的cookie则显示在指定密码位置上,并设置复选框为选中状态
    	  $("input[name='mobile']").on("input",function(){
    		  // 清空密码和取消选中
    		  $("input[name='password']").val("");
    		  $("input[name='remember']").prop("checked",false);
    		  
    		  // 获取输入的手机号
    		  let mobile = $(this).val();
    		  // 和cookie中rememberMe的value值前半部分手机号进行对比
    		  let rememberMe = $.cookie('rememberMe');  
    		  if(rememberMe != null){
    			  let vs = rememberMe.split("="); // ["手机号","密码"]
    			  if(vs[0] == mobile){
    				  // 填充密码和把复选框选中
    				  $("input[name='password']").val(vs[1]);
    				  $("input[name='remember']").prop("checked",true);
    			  }
    		  }
    		  
    	  })
      });
      </script>
			<div class="xia clearfix">
				<p>Copyright © 2020 厦门游戏商城(xiamenyouxishangcheng). All Rights Reserved.</p>
			</div>
		</div>
	</body>
</html>
